import {Component} from "@angular/core";
import {style, state, animate, transition, trigger} from "@angular/animations";
@Component({
  template:`
    <img width="100%" [@flyInOut]="mi[2]" src="assets/with.jpeg">
    <h4 [@flyInOut]="mi[3]">"身教"胜于"言传"，榜样的力量是无穷的！</h4>
    <h4 [@flyInOut]="mi[0]">开学季</h4>
    <h4 [@flyInOut]="mi[1]">快来跟孩子一起充电吧！</h4>
    
  `,
  styles:[
    `h4{
      padding-left:5vw;
    }`
  ],
  animations:[trigger('flyInOut', [
    state('in', style({transform: 'translateX(-100%)'})),
    transition('in => active', [
      style({transform: 'translateY(2000px) rotate(-900deg)'}),
      animate("3s ease-in-out")
    ]),
    transition('in => active1', [
      style({transform: 'translateX(-100%) rotate(-900deg)'}),
      animate("1s ease-in-out")
    ]),
    transition('* => void', [
      animate(3000, style({transform: 'translateX(100%)'}))
    ])
  ]),trigger('flyInOut1', [
    state('in', style({transform: 'translateX(0)'})),
    transition('void => active', [
      style({transform: 'translateX(-100%)'}),
      animate("3s 2s")
    ]),
    transition('* => void', [
      animate(3000, style({transform: 'translateX(100%)'}))
    ])
  ])]
})
export class IndexComponent{
  mi=['in','in','in','in'];
  constructor(){
    setTimeout(()=>this.mi[1]='active',100);
    setTimeout(()=>this.mi[0]='active1',100);
    setTimeout(()=>this.mi[2]='active1',100);
    setTimeout(()=>this.mi[3]='active1',100);
  }
}
